<template>
  <div class="class-wrapper">
    <div class="top d-flex-sb">
      <Search placeholder="请输入课程名称" @search="handleSearch" />
      <el-button type="primary" @click.native="add">添加</el-button>
    </div>
    <div class="bottom">
      <table-list :list="list" @delSuccess="handleDelSuccess" />
    </div>
    <Pagination class="pagination" :total="total" :cur-page="currentPage" @nextPage="handleNextPage" />
  </div>
</template>
<script>
import Search from '@/common/search'
import TableList from '@/views/class-list/table-list'
import { getClassList } from '@/api/request/class'
import Pagination from '@/common/pagination'
const ERR_OK = 200
export default {
  components: {
    Search,
    TableList,
    Pagination
  },
  data() {
    return {
      total: 0,
      currentPage: 1,
      list: [],
      query: ''

    }
  },
  created() {
    this._getClassList(this.currentPage)
  },
  methods: {
    handleDelSuccess() {
      this.currentPage = 1
      this._getClassList(this.currentPage)
    },
    handleSearch(query) {
      this.query = query
      this.currentPage = 1
      this._getClassList(this.currentPage, this.query)
    },
    handleNextPage(page) {
      this.currentPage = page
      this._getClassList(this.currentPage, this.query)
    },
    add() {
      this.$router.push('/classList/edit')
    },
    _getClassList(page, keyword) {
      getClassList({ page, keyword })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.total = res.total
            this.list = res.list
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-button.scss";
@import "@/styles/el-pagination.scss";
.class-wrapper{
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
  .top{
    height: 80px;
  }
}
.d-flex-sb{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
